import {RectNode, RectNodeModel, h} from "@logicflow/core";
import {rectRadius, rectTxtStyle, shapeBorderColor} from "../../config";
import {NodeClassType, NodeProperty, NodeShape} from "../../util/types";
class LRect extends RectNode {
    /**
     * model中x,y为中心坐标，正方形为左上角的坐标
     * rx, ry 为圆角
     */
    getShape() {
        const {model} = this.props;
        const {x, y, width, height, radius, properties} = model;
        const style = model.getNodeStyle();
        const sx = x - width / 2;
        const sy = y - height / 2;
        const txtList = isExitTxtShape({
            x: sx,
            y: sy,
            w: width,
            h: height
        }, properties);
        return h('g', {}, [
            h('rect', {
                ...style,
                x: sx,
                y: sy,
                rx: radius,
                ry: radius,
                width,
                height,
            }),
            ...txtList
        ]);
    }
}

class RectModel extends RectNodeModel {
    // 宽高等形状
    initNodeData(data: any) {
        super.initNodeData(data);
        this.radius = rectRadius;
    }

    // 形状style
    getNodeStyle() {
        const style = super.getNodeStyle();
        style.stroke = shapeBorderColor;
        return style;
    }

    // 文本style
    getTextStyle() {
        const style = super.getTextStyle();
        style.color = '#000';
        return style;
    }
}

function createTxt(opt: any, txt: string) {
    return h('text', {
        ...rectTxtStyle,
        ...opt
    }, [txt])
}

function isExitTxtShape(opt: NodeShape, proOpt: NodeProperty) {
    const {x, y, w, h} = opt;
    const {leftTopTxt, rightTopTxt, leftBottomTxt, rightBottomTxt} = proOpt;
    let txtList = [];
    if (leftTopTxt) {
        txtList.push(createTxt({
            x: x + 5,
            y: y + 15,
            ...proOpt
        }, leftTopTxt));
        txtList.push(',');
    }
    if (rightTopTxt) {
        // 计算逻辑
        txtList.push(createTxt({
            x: x + w - (14 * rightTopTxt.length),
            y: y + 15,
            ...proOpt
        }, rightTopTxt));
        txtList.push(',');
    }
    if (leftBottomTxt) {
        txtList.push(createTxt({
            x: x + 5,
            y: y + h - 5,
            ...proOpt
        }, leftBottomTxt));
        txtList.push(',');
    }
    if (rightBottomTxt) {
        txtList.push(createTxt({
            x: x + w - (14 * rightBottomTxt.length),
            y: y + h - 5,
            ...proOpt
        }, rightBottomTxt));
    }
    if (txtList.at(-1) === ',') {
        txtList = txtList.slice(0, txtList.length - 1);
    }
    return txtList;
}

export default<NodeClassType> {
    type: 'LRect',
    view: LRect,
    model: RectModel,
    text: '普通节点',
    icon: 'general',
    order: 1,
    properties: {
        leftTopTxt: '232323'
    }
}
